<template>
	<view>
		<image
			v-for="(item, index) in packetList"
			:key="index"
			class="red-packet"
			:src="item.src"
			:style="'position:fixed;top:' + item.top + 'px;left:' + item.left + 'px;-webkit-transition:' + item.speed + 'ms linear 0ms;transition:' + item.speed + 'ms linear 0ms'"
		></image>
		<view class="btn">
			<image class="btn_img" src="https://movie666.oss-cn-beijing.aliyuncs.com/static/red_btn.gif" mode=""></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			windowWidth: '', //窗口宽度
			windowHeigh: '', //窗口高度
			packetList: [{}], //红包队列
			packetNum: 888, //总共红包的数量
			showInter: '' // 循环动画定时器
		};
	},
	onLoad() {
		var that = this;
		// 获取手机屏幕宽高
		wx.getSystemInfo({
			success: function(res) {
				that.windowWidth = res.windowWidth;
				that.windowHeigh = res.windowHeight;
				that.top = res.windowHeight - 100; //设置红包初始位置
			}
		});

		//建立临时红包列表
		var packetList = [];
		//建立临时红包图片数组
		var srcList = ['../../static/red_1.png', '../../static/red_2.png', '../../static/red_3.png', '../../static/red_4.png'];
		//生成初始化红包
		for (var i = 0; i < that.packetNum; i++) {
			// 生成随机位置（水平位置）
			var left = Math.random() * that.windowWidth - 20;
			// 优化位置，防止红包越界现象，保证每个红包都在屏幕之内
			if (left < 0) {
				left += 20;
			} else if (left > that.windowWidth) {
				left -= 20;
			}
			// 建立临时单个红包
			var packet = {
				src: srcList[Math.ceil(Math.random() * 4) - 1],
				top: -100,
				left: left,
				speed: Math.random() * 1000 + 2000 //生成随机掉落时间，保证每个掉落时间保持在3秒到5.5秒之间
			};
			// 将单个红包装入临时红包列表
			packetList.push(packet);
			// 将生成的临时红包列表更新至页面数据，页面内进行渲染
			that.packetList = packetList;
		}
		// 初始化动画执行当前索引
		var tempIndex = 0;
		// 开始定时器，每隔1秒掉落一次红包
		that.showInter = setInterval(function() {
			// 生成当前掉落红包的个数，1-3个
			var showNum = Math.ceil(Math.random() * 3);
			// 防止数组越界
			if (tempIndex * showNum >= that.packetNum) {
				// 如果所有预生成的红包已经掉落完，清除定时器
				clearInterval(that.showInter);
			} else {
				switch (showNum) {
					case 1:
						//设置临时红包列表当前索引下的top值，此处top值为动画运动的最终top值
						packetList[tempIndex].top = that.windowHeigh;
						// 当前次掉落几个红包，索引值就加几
						tempIndex += 1;
						break;
					case 2:
						packetList[tempIndex].top = that.windowHeigh;
						packetList[tempIndex + 1].top = that.windowHeigh;
						tempIndex += 2;
						break;
					case 3:
						packetList[tempIndex].top = that.windowHeigh;
						packetList[tempIndex + 1].top = that.windowHeigh;
						packetList[tempIndex + 2].top = that.windowHeigh;
						tempIndex += 3;
						break;
					default:
				}
				// 更新红包列表数据
				that.packetList = packetList;
			}
		}, 1000);
	},
	methods: {}
};
</script>

<style lang="scss">
.red-packet {
	width: 48px;
	height: 48px;
	z-index: 100;
	transition-property: transform, top;
	transform-origin: 50% 50% 0;
	-webkit-transition-property: transform, top;
	-webkit-transform-origin: 50% 50% 0;
}
.btn{
	position: fixed;
	z-index: 9999999;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	&_img{
		width: 666rpx;
		height: 666rpx;
	}
}
</style>
